<config lang="json">
{
  navigationBarTitleText: '添加任务',
  usingComponents: {

  }
}
</config>

<template>
  <div class="task-create-page">
    <van-cell-group>
      <van-field label="选择维度"
                 readonly="true"
                 disabled="true"
                 :value="currentWd"
                 @click="showArea=true" />
      <van-popup :show="showArea"
                 position="bottom"
                 overlay="true"
                 @onClose="showArea=false">
        <van-area :area-list="areaList"
                  @confirm="onSelectArea"
                  @cancel="showArea=false" />
      </van-popup>

      <van-field label="能力类型"
                 readonly="true"
                 disabled="true"
                 :value="currentAbility"
                 @click="showAbility=true" />
      <van-popup :show="showAbility"
                 position="bottom"
                 overlay="true"
                 @onClose="showAbility=false">
        <van-picker show-toolbar
                    :columns="abilityList"
                    @confirm="onSelectAbility"
                    @cancel="showAbility=false" />
      </van-popup>

      <van-field label="标题"
                 @change="onChange('title',$event)"
                 placeholder="请输入任务标题" />

      <div class="form-textarea">
        <div class="label">任务详情</div>
        <van-field v-if="showDialog==false&&showDateTimePicker==false&&showAbility == false&&showArea == false"
                   :value="taskData.detail"
                   type="textarea"
                   @change="onChange('detail',$event)"
                   placeholder="请输入任务详情" />
      </div>
      <div class="form-textarea">
        <div class="label">评分标准</div>
        <van-field v-if="showDialog==false&&showDateTimePicker==false&&showAbility == false&&showArea == false"
                   :value="$globalData.taskgrade"
                   type="textarea"
                   readonly />
      </div>

      <van-field label="截止时间"
                 readonly="true"
                 disabled="true"
                 :value="currentDateString"
                 @click="showDateTimePicker=true" />
      <van-popup :show="showDateTimePicker"
                 position="bottom "
                 overlay="true"
                 @onClose="showDateTimePicker=false">
        <van-datetime-picker type="date"
                             :min-date="minDate"
                             :value="currentDate"
                             @confirm="onInput"
                             @cancel="showDateTimePicker=false" />
      </van-popup>
    </van-cell-group>

    <van-cell-group>
      <div class="d-flex justify-content-center mt-4">
        <div @click="createContent"
             class="custom-button-success d-flex align-items-center justify-content-center"
             style="width:240px;height:48px;">
          创建任务
        </div>
      </div>
    </van-cell-group>

    <van-dialog id="van-dialog" />

  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import Dialog from '@/static/vant/dialog/dialog'

@Component({
  components: {},
  filters: {}
})
export default class StudentTasks extends Vue {
  public showDialog = false;

  @Action createStudentTask;

  public showAbility = false;
  public currentAbility = '选择提升的能力';
  public abilityList = [
    '团队人员管理',
    '团队文化锻造',
    '业务基础精进',
    '技术工艺创新',
    '外部资源整合',
    '内部资源协调'
  ];

  public currentWd = '请点击选择维度';
  public areaList = {
    province_list: {
      110000: '团队',
      120000: '业务',
      130000: '资源'
    },
    city_list: {
      110100: '人员',
      110200: '文化',
      120100: '基础',
      120200: '创新',
      130100: '对外',
      130200: '对内'
    },
    county_list: {
      110101: '团队组建',
      110102: '人员任用',
      110201: '氛围',
      110202: '能力',
      120101: '进度',
      120102: '质量',
      120103: '成本',
      120201: '技术',
      120202: '管理',
      130101: '政府',
      130102: '危机',
      130201: '供应商',
      130202: '跨部门'
    }
  };

  public showArea = false;
  public showDateTimePicker = false;
  public taskData: any = {};

  public currentDateString = '请点击选择日期';

  public currentDate = new Date().getTime();
  public minDate = new Date().getTime();

  public get studentInfo () {
    return this.$store.state.student.studentInfo
  }
  public onChange (name, event) {
    this.taskData[name] = event.detail
  }

  public onSelectAbility (event) {
    const { picker, value, index } = event.detail
    this.taskData['abilityType'] = this.$globalData.abilityAllList.indexOf(value)
    this.currentAbility = value
    this.showAbility = false
  }

  public onSelectArea (event) {
    this.taskData['one'] = event.detail.values[0].name
    this.taskData['two'] = event.detail.values[1].name
    this.taskData['three'] = event.detail.values[2].name

    this.currentWd =
      this.taskData['one'] +
      '-' +
      this.taskData['two'] +
      '-' +
      this.taskData['three']

    this.showArea = false
  }

  public onInput (event) {
    this.currentDate = event.detail
    this.taskData['deadLine'] = new Date(this.currentDate)

    this.currentDateString =
      this.taskData['deadLine'].getFullYear() +
      '-' +
      (this.taskData['deadLine'].getMonth() + 1) +
      '-' +
      this.taskData['deadLine'].getDate()

    this.showDateTimePicker = false
  }
  public async createContent () {
    try {
      this.showDialog = true
      await Dialog({
        title: '创建任务',
        message: '确认创建任务吗?',
        showCancelButton: true
      })
    } catch {
      this.showDialog = false
      return
    }
    this.showDialog = false
    if (
      this.taskData['abilityType'] == null ||
      this.taskData['abilityType'] === undefined
    ) {
      Megalo.showToast({
        title: '未选择提升的能力',
        icon: 'none',
        duration: 1000,
        mask: false
      })
      return
    }

    this.taskData['studentId'] = this.$globalData.appUser.id
    this.taskData['teacherId'] = this.studentInfo.teacherId
    var data = await this.createStudentTask(this.taskData)
    Megalo.navigateBack()
    Megalo.showToast({
      title: '创建成功',
      icon: 'none',
      duration: 1000,
      mask: false
    })
  }
}
</script>

<style lang="stylus" scoped></style>
